<template>
  <div class="body">
    <div class="left">
      <div class="addbutton">
        <div v-if="canadd">
          <el-button v-if="tjadd" type="primary" @click="addtabledata"
          >添加</el-button
          >
          <el-button v-else type="info">添加</el-button>
        </div>
        <div v-else>
          当前模板正在使用中，无法添加楼层TAT。
        </div>
        
      </div>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="id" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="范围名称" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.state" style="margin-left: 10px">{{
              scope.row.name
            }}</span>
            <el-input
              v-else
              v-model="datas.name"
              placeholder="范围名称"
              clearable
            />
          </template>
        </el-table-column>
        <el-table-column label="占地平方米" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.state" style="margin-left: 10px">{{
              scope.row.square
            }}</span>
            <el-input
              v-else
              v-model="datas.square"
              placeholder="占地平方米"
              clearable
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.state"
              size="mini"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <div v-else>
              <el-button size="mini" @click="adddata">确定添加</el-button>
              <el-button size="mini" @click="cancel(scope.$index)"
                >取消添加</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 修改对话框 -->
    <el-dialog
      title="负责范围修改"
      :visible.sync="dialogFormVisible"
      width="40%"
      center
    >
      <el-form :model="editForm">
        <el-form-item label="负责范围" label-width="105px" prop="name">
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="占地平方米" label-width="105px" prop="square">
          <el-input v-model="editForm.square" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editok">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  responsibledata,
  responsiblepost,
  responsibleupdate,
} from "../../../../api/template";
import {
  getproject,
} from "../../../../api/project";
export default {
  components: {},
  data() {
    return {
      tableData: [],
      datas: {
        name: "",
        square: "",
      },
      tjadd: true,
      canadd:true,
      models_id: this.$route.query.id,
      editForm: { id: "", name: "", square: "" },
      editId: 0,
      dialogFormVisible: false,
    };
  },
  computed: {},
  activated() {
    this.datalist();
    this.getProjectFun()
  },
  created() {},
  mounted() {
    this.datalist();
    this.getProjectFun()
  },
  methods: {
    async getProjectFun(){
      const {data} = await getproject()
      if(data.some((res)=>{
        return String(res.templates_id) == String(this.$route.query.id)
      })){
        this.canadd = false
      }else{
        this.canadd = true
      }
    },
    async datalist() {
      const data = await responsibledata(this.$route.query.id);
      console.log(data, "负责范围");
      data.data.forEach((item, index) => {
        item["state"] = true;
      });
      this.tableData = data.data;
    },
    // 编辑
    handleEdit(row) {
      this.editForm.id = row.id;
      this.editForm.name = row.name;
      this.editForm.square = row.square;
      this.dialogFormVisible = true;
    },
    // 编辑完成
    async editok() {
      const res = await responsibleupdate(this.editForm);
      if (res.code == 200) {
        this.dialogFormVisible = false;
        this.$message.success("负责范围修改成功");
        this.datalist();
      }
    },
    // 取消添加
    cancel(index) {
      this.tableData.splice(index, 1);
      this.tjadd = true;
    },
    addtabledata() {
      this.datas = {
        name: "",
        square: "",
      };
      if (this.tjadd) {
        this.tableData.push("");
        this.tjadd = false;
      }
    },
    async adddata() {
      if (this.datas.square != "" && this.datas.name != "") {
        const d = {
          name: this.datas.name,
          square: this.datas.square,
          models_id: this.models_id,
        };
        const data = await responsiblepost(d);
        console.log(data);
        if (data.code == 200) {
          this.datalist();
          this.datas.square == "";
          this.datas.name == "";
          this.tjadd = true;
        } else {
          this.$message.error(data.message);
        }
      } else {
        this.$message.error("数据是必填的");
      }
    },
  },
};
</script>
<style scoped>
.body {
  width: 100%;
  display: flex;
}

.left {
  width: 80%;
  margin: 0 auto;
}
.addbutton {
  float: right;
  margin: 20px 0;
}
.bottom {
  float: right;
  margin-right: 5vw;
}
</style>